import { PenChildProps } from "@/types";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { Button, Input, Space, Switch } from "antd";

export function AnimationVideo({ penOptions, setPenValue }: PenChildProps) {
  return (
    <>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label="音频URL">
          <Input.TextArea
            value={penOptions.audio}
            onChange={(e) => {
              setPenValue("audio", e.target.value);
            }}
          ></Input.TextArea>
        </FormRowCol>
        <FormRowCol label="视频URL">
          <Input.TextArea
            value={penOptions.video}
            onChange={(e) => {
              setPenValue("video", e.target.value);
            }}
          ></Input.TextArea>
        </FormRowCol>
        <FormRowCol label="自动播放">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.autoPlay}
            onChange={(checked) => {
              setPenValue("autoPlay", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="循环播放">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.playLoop}
            onChange={(checked) => {
              setPenValue("playLoop", checked);
            }}
          />
        </FormRowCol>
        <Space size={[20, 20]}>
          <Button
            type={"primary"}
            onClick={() => {
              window.meta2d.startVideo(penOptions.id);
            }}
          >
            播放
          </Button>
          <Button
            type={"primary"}
            onClick={() => {
              window.meta2d.pauseVideo(penOptions.id);
            }}
          >
            暂停
          </Button>
          <Button
            type={"primary"}
            onClick={() => {
              window.meta2d.stopVideo(penOptions.id);
            }}
          >
            停止
          </Button>
        </Space>
      </Space>
    </>
  );
}
